<template>
  <div>
    <el-collapse :value="defaultActive">
      <!--       分单-->
      <el-collapse-item style="margin-bottom: 10px" name="1" v-if="$permiss[1321]">
        <template slot="title">
          <div class="collapse_title">
            {{ $t('分单') }}
          </div>
        </template>
        <div>
          <el-form label-width="120px" ref="orderForm" :model="orderForm" :rules="rulesForm">
            <el-row :gutter="24">
              <el-col :span="8" :xs="24">
                <el-form-item :label="$t('资源APP')" prop="productName">
                  <el-select style="width: 250px" v-model="orderForm.productName" clearable>
                    <el-option v-for="item in marketingProduct" :key="item.productId" :label="item.appName"
                               :value="item.productName"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="14" :xs="24">
                <el-form-item :label="$t('注册时间')" prop="timeValue">
                  <el-date-picker
                      style="width: 350px"
                      value-format="yyyy-MM-dd"
                      v-model="orderForm.timeValue"
                      type="daterange"
                      range-separator="~"
                      :start-placeholder="$t('开始日期')"
                      :end-placeholder="$t('结束日期')">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-form-item>
                <el-col :span="8">
                  <el-button type="primary" @click="searchOrder" :loading="searchLoading">{{ $t('查询') }}</el-button>
                  <el-button @click="resetForm">{{ $t('重置') }}</el-button>
                </el-col>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <!--      绑定人员-->
      <el-collapse-item style="margin-bottom: 10px" name="2">
        <template slot="title">
          <div class="collapse_title">
            {{ $t('绑定人员') }}
          </div>
        </template>
        <div>
          <el-form label-width="80px">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item :label="$t('员工姓名')">
                  <el-input v-model="bindPage.adminName" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('账号')">
                  <el-input v-model="bindPage.accountNumber" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: right">
                <el-button type="primary" @click="getBindTableData">{{ $t('查询') }}</el-button>
                <el-button @click="clearSearch">{{ $t('重置') }}</el-button>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: right;margin-bottom: 10px ">
            <el-button type="primary" v-show="$permiss[648]" @click="addVisible = true,addPersonnelTableData()">{{
                $t('新增')
              }}
            </el-button>
          </div>
          <div style="margin-bottom: 20px">
            <Table :table-column="bindTableColumn" :page="bindPage" :table-data="bingTableData"
                   @handleSizeChange="bingSizeChange"
                   @handleCurrentChange="bingPageChange">
              <template slot="bindApp" slot-scope="{row}">
                <div v-if="row.list && row.list.length">
                  <el-tag :disable-transitions="true" style="margin: 5px 5px 0 0" v-for="item in row.list" :key="item">
                    {{ item }}
                  </el-tag>
                </div>
              </template>
              <template slot-scope="{row}" slot="handle">
                <el-button v-show="$permiss[674]" type="text" @click="handleDelList(row)">{{ $t('解绑') }}</el-button>
              </template>
            </Table>
          </div>
          <!--           新增员工-->
          <Dialog :visible.sync="addVisible" :title="$t('新增')" @confirm="addConfirm" width="50%" :footer="$permiss[673]"
                  @cancel="addVisible = false">
            <el-form label-width="80px">
              <el-row :gutter="24">
                <el-col :span="10">
                  <el-form-item :label="$t('员工姓名')">
                    <el-input v-model="addPage.adminName" clearable/>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item :label="$t('账号')">
                    <el-input v-model="addPage.accountNumber" clearable/>
                  </el-form-item>
                </el-col>
                <el-col :span="4" style="text-align: right">
                  <el-button type="primary" @click="addPersonnelTableData">{{ $t('查询') }}</el-button>
                </el-col>
              </el-row>
            </el-form>
            <Table :selection="true" :select-rows="addSelectRows" @handleSelectionChange="handleSelectionChange"
                   :page="false" :table-column="addTableColumn"
                   :table-data="addTableData">
              <template slot="bindApp" slot-scope="{row}">
                <div v-if="row.list && row.list.length">
                  <el-tag :disable-transitions="true" style="margin: 5px 5px 0 0" v-for="item in row.list" :key="item">
                    {{ item }}
                  </el-tag>
                </div>
              </template>
            </Table>
          </Dialog>
        </div>
      </el-collapse-item>


    </el-collapse>
    <!--      查询分单-->
    <Dialog :visible.sync="transferOrderVisible" :title="$t('分单')" :footer="false" width="65%">
      <div style="text-align: right;margin-bottom: 10px">
        <el-button type="primary" @click="distribution('select')">{{ $t('所选分配') }}</el-button>
        <el-button type="primary" @click="distribution('search')">{{ $t('所搜分配') }}</el-button>
      </div>
      <Table :selection="true"
             :loading="loading"
             :select-rows="orderSelectRows" @handleSelectionChange="(val)=>{
            orderSelectRows = val
          }" :table-column="orderTableColumn"
             :table-data="orderTableData" :page="orderPage"
             @handleSizeChange="(val)=>{
               orderPage.pageSize = val
               searchOrder()
             }"
             @handleCurrentChange="(val)=>{
                  orderPage.pageNum = val
                     searchOrder()
             }"
      >
        <template slot="avoidAudit" slot-scope="{row}">
          {{ row.avoidAudit === 1 ? $t('是') : $t('否') }}
        </template>

      </Table>
      <!--         选择营销人员-->
      <Dialog append-body width="45%" :title="distributionTitle" @cancel="distributionPersonVisible = false"
              @confirm="distributionConfirm"
              :visible.sync="distributionPersonVisible" :confirm-loading="confirmLoading">
        <el-form label-width="80px">
          <el-row :gutter="24">
            <el-col :span="10">
              <el-form-item :label="$t('员工姓名')">
                <el-input v-model="distributionPersonPage.adminName" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item :label="$t('账号')">
                <el-input v-model="distributionPersonPage.accountNumber" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: right">
              <el-button type="primary" @click="getAuditPersonnelSelect">{{ $t('查询') }}</el-button>
            </el-col>
          </el-row>
        </el-form>
        <Table :selection="true" :select-rows="distributionSelectRows" @handleSelectionChange="(val)=>{
            distributionSelectRows = val
          }"
               :page="false" :table-column="distributionTableColumn"
               :table-data="auditPersonnel">
        </Table>
      </Dialog>
    </Dialog>
  </div>
</template>

<script>
import bindList from './bingList'
import {selectProduct} from "@/api/system";
import {flowUserConfigQuery, flowUserSearchedSingle, flowUserSelectedSingle} from "@/api/marketing";
import {dateFormatSection} from "@/utils/tools";
import {selectMarketingStaff} from '@/api/system'

export default {
  name: "userConfig",
  data() {
    return {
      defaultActive: ['1', '2'],
      orderForm: {},
      bindType: 3,
      marketingProduct: [],
      rulesForm: {
        productName: [
          {required: true, message: this.$t('请选择')},
        ],
        timeValue: [
          {required: true, message: this.$t('请选择')},
        ],
      },
      loading: false,
      transferOrderVisible: false,
      orderPage: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      orderTableColumn: [
        {label: this.$t('姓名'), prop: 'name'},
        {label: this.$t('手机号码'), prop: 'phone'},
        {label: this.$t('注册时间'), prop: 'creationTime'},
        {label: this.$t('APP名称'), prop: 'appName'},
      ],
      orderTableData: [],
      orderSelectRows: [],
      distributionPersonVisible: false,
      distributionPersonPage: {
        pageSize: 1000,
        pageNum: 1,
        total: 0
      },
      distributionSelectRows: [],
      distributionTableColumn: [
        {label: this.$t('员工姓名'), prop: 'adminName'},
        {label: this.$t('账号'), prop: 'accountNumber'},
      ],
      distributionTableData: [],
      distributionType: '',
      distributionTitle: '',
      auditPersonnel: [],
      confirmLoading: false,
      searchLoading: false,
      smsTemplateVisible: false,
      smsTemplateForm: {},
    }
  },
  mixins: [bindList],
  mounted() {
    this.getSelect()
  },
  methods: {
    getSelect() {
      selectProduct().then(res => {
        this.marketingProduct = res.data
      })
    },
    // 查询单
    searchOrder() {
      this.$refs.orderForm.validate(async v => {
        if (v) {
          const [registerStartTime, registerEndTime] = dateFormatSection(this.orderForm.timeValue || [])
          const params = {
            ...this.orderPage,
            ...this.orderForm,
            registerStartTime, registerEndTime,
          }
          delete params.timeValue
          this.searchLoading = true
          this.loading = true
          const res = await flowUserConfigQuery(params)
          if (res.code === 1) {
            const {list,total} = res.data
            this.orderTableData = list
            this.orderPage.total=total
            this.searchLoading = false
            this.transferOrderVisible = true
            this.loading = false
          } else {
            this.searchLoading = false
            this.loading = false
          }
        }
      })
    },
    resetForm() {
      this.orderForm = {}
      this.$refs.orderForm.resetFields()
    },
    distribution(type) {
      if (type === 'select') {
        this.selectDistribution()
      } else if (type === 'search') {
        this.searchDistribution()
      }
    },
    // 所搜分配
    async searchDistribution() {
      await this.getAuditPersonnelSelect()
      this.distributionTitle = this.$t('所搜分配')
      this.distributionType = 'search'
      this.distributionPersonVisible = true
    },
    // 所选分配
    async selectDistribution() {
      await this.getAuditPersonnelSelect()
      this.distributionTitle = this.$t('所选分配')
      this.distributionType = 'select'
      this.distributionPersonVisible = true
    },
    // 获取营销员
    async getAuditPersonnelSelect() {
      const res = await selectMarketingStaff({
        productName: this.orderForm.productName,
        type: 3,
        isRest: 1,
        ...this.distributionPersonPage
      })
      if (res.code === 1) {
        this.auditPersonnel = res.data
      }
    },
    // 开始分单
    async distributionConfirm() {
      if (this.distributionSelectRows.length === 0) return this.$message.error(this.$t('请选择营销员'))
      const auditList = this.distributionSelectRows.map(item => item.adminUserId)
      const orderRows = this.orderSelectRows.map(item => item.userId)
      const [registerStartTime, registerEndTime] = dateFormatSection(this.orderForm.timeValue || [])
      let params = {}
      this.confirmLoading = true
      if (this.distributionType === 'search') {
        // 所搜分配
        params = {
          marketingUserIds: auditList,
          ...this.orderForm,
          registerStartTime, registerEndTime
        }
      } else {
        // 所选分配
        if (this.orderSelectRows.length === 0) {
          this.confirmLoading = false
          return this.$message.error(this.$t('请勾选要分配的订单'))
        }
        params = {
          ...this.orderForm,
          registerStartTime, registerEndTime,
          userIds: orderRows,
          marketingUserIds: auditList
        }
      }
      delete params.timeValue
      const api = (params) => this.distributionType === 'search' ? flowUserSearchedSingle(params) : flowUserSelectedSingle(params)
      const res = await api(params)
      if (res.code === 1) {
        this.confirmLoading = false
        this.distributionPersonVisible = false
        this.searchOrder()
        this.$message.success(this.$t('操作成功'))
      } else {
        this.confirmLoading = false
      }
    },
  }
}
</script>

<style scoped>
.collapse_title {
  margin-left: 20px;
  font-size: 16px;
}

>>> .el-collapse-item__header {
  background-color: #FFF4D3;
}

>>> .el-collapse-item__content {
  padding: 20px 20px 0 20px;
}
</style>
